<template>
  <div>
      <input type="text" v-model="msg" @keyup.enter="handleEnter">
      <p>{{msg}}</p>
      <div v-for="item of arr" :key="item">
          {{item}} <button @click="handleDelete(item)">删除</button>
      </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import {onMounted} from '@vue/runtime-core';
export default {
    setup(){
        const state = reactive({
            msg:"",
            arr:[],
            handleEnter(){
                if(!state.arr.includes(state.msg)){
                    state.arr.push(state.msg);
                    state.msg =""
                    localStorage.setItem("historys",state.arr)
                }else{
                    var index = state.arr.indexOf(state.msg);
                    state.arr.splice(index,1);
                    state.arr.unshift(state.msg)
                     localStorage.setItem("historys",state.arr)
                }
            },
            handleDelete(item){
                var index = state.arr.indexOf(item);
                state.arr.splice(index,1);
                 localStorage.setItem("historys",state.arr)
            },
         
        })
          onMounted(()=>{
            var arr = localStorage.getItem("historys");
            var list = arr.split(",")
            list.forEach(item=>{
                state.arr.push(item)
            })
        })
       
        const refState = toRefs(state);
        return{
            ...refState
        }
    }
    

}
</script>

<style>

</style>